import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';
import {BodyOutputType, Toast, ToasterConfig, ToasterService} from "angular2-toaster";
import {CcqInfo, DynamicsService} from "../../dynamics/dynamics.service";
import { DatePipe } from '@angular/common';

declare function init(map): void;
declare function addPoint(data): void;
declare function zoomTo(x,y,zoomLevel): void;
declare function addMapEventListener(eventType, eventHandle): void;
declare function ptSelectedHandle(features):void;
declare function ptDeselectedHandle(features):void;

@Component({
  selector: 'well',
  templateUrl: './well.component.html',
  styleUrls: ['./well.component.scss']
})
export class WellComponent implements OnInit {

  btnMenu: any[];

  date3: Date = new Date();

  types: SelectItem[];

  selectedCity = '';

  selectedType = '';

  stnm = '';

  cities;

  odtypes;

  showList: boolean;

  showContent: boolean;

  showPanel: boolean;

  ccqInfo: CcqInfo[];

  config: ToasterConfig;

  selectedCcq;

  ol_title;

  data = [{
    x: 111.211103,
    y: 37.741803,
    name: '侯家坡站'
  }, {
    x: 112.854103,
    y: 35.504633,
    name: '尧沟'
  }];

  constructor(private dynamicsService: DynamicsService,
              private toasterService: ToasterService,
              private datePipe: DatePipe) {
    this.btnMenu = [
      {name: '逐日井', id: '1', img: '/assets/images/dynamics/well/btn_1.png'},
      {name: '五日井', id: '2', img: '/assets/images/dynamics/well/btn_2.png'},
      {name: '国家地下水观测井', id: '3', img: '/assets/images/dynamics/well/btn_3.png'},
      {name: '生活典型区', id: '4', img: '/assets/images/dynamics/well/btn_4.png'},
      {name: '工业典型区', id: '5', img: '/assets/images/dynamics/well/btn_5.png'},
      {name: '农业典型区', id: '6', img: '/assets/images/dynamics/well/btn_6.png'}
    ];

    this.cities = [
      {name: '所有地区', id: ''},
      {name: '济南市', id: '1'}
    ];

    this.odtypes = [
      {name: '超采区类型', id: ''},
      {name: '浅层地下水超采区', id: '1'},
      {name: '深层承压水超采区', id: '2'}
    ];

  }

  ngOnInit(): void {
    init('mapDiv');
    //添加地图事件
    addMapEventListener('click', (features:any) => {
      let title = "";
      if(features){
        title = features[0].get('name');
        this.ol_title =  title;
        this.showPanel = true;
      }
    });

    addMapEventListener('pointermove', (features:any) => {
      if(features){
        ptSelectedHandle(features);
      }else{
        ptDeselectedHandle(features);
      }
    });
  }

  queryCcqInfo(): void {
    this.dynamicsService.queryCcqInfo(this.selectedType)
      .subscribe(
        (data: CcqInfo[]) => this.ccqInfo = data, // success path
        error => this.errorTodo(error)
      )
  }


  errorTodo(error): void{
    const toast: Toast = {
      type: 'error',
      title: '请求失败',
      body: 'json格式解释错误',
      bodyOutputType: BodyOutputType.TrustedHtml,
    };
    this.toasterService.popAsync(toast);
  }

  handleClick(btn){
    if(btn.id=='1'){
      this.showList = true;
    }
  }

  search(){
    let dateStr:string = this.datePipe.transform(this.date3,'yyyy');
    console.log(dateStr);
    console.log(this.selectedType);
    console.log(this.selectedCity);
    console.log(this.stnm);
    this.showContent = true;
    this.queryCcqInfo();
    addPoint(this.data);
  }

  hideContent(e){
    if(e.index==1){
      this.showContent = false;
    }
  }

  hidePanel(){
    this.showPanel = false;
  }

  mapInfo(ccq){
    this.selectedCcq = ccq;
    if(ccq.stcd=='1' || ccq.stcd=='3'){
      zoomTo(this.data[0].x, this.data[0].y,8);
      this.ol_title = this.data[0].name;
      this.showPanel = true;
    }
    if(ccq.stcd=='2' || ccq.stcd=='4'){
      zoomTo(this.data[1].x, this.data[1].y,8);
      this.ol_title = this.data[1].name;
      this.showPanel = true;
    }
  }

  chartOption = {
    grid:{
      y:40,
      y2:30,
      x2:35
    },
    xAxis: {
      name: '/月',
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    },
    yAxis: {
      name: '水位/米',
      type: 'value',
      min: 0,
      max: 20
    },
    series: [{
      data: [5, 8, 9, 10, 11, 12, 12, 12, 11, 10, 9, 8],
      type: 'line',
      itemStyle: {
        normal: { label: { show:true },color:'#007bff'}
      }
    }]
  };

}
